<template>
	<div>
		<city-header></city-header>
		<city-search :cities="cities"></city-search>
		<city-list :hot="hotCities" :cities="cities" :letter="letter"></city-list>
		<city-alphabet :cities="cities" @change="handleletterChange"></city-alphabet>
	</div>
</template>

<script>
import CityHeader from 'src/pages/city/components/header'
import CitySearch from 'src/pages/city/components/search'
import CityList from 'src/pages/city/components/list'
import CityAlphabet from 'src/pages/city/components/alphabet'
import axios from 'axios'
export default{
	components:{
		CityHeader,
		CitySearch,
		CityList,
		CityAlphabet
	},
	data (){
		return{
			hotCities:[],
			cities:{},
			letter:''

		}
	},
	methods:{
		getCityInfo () {
			axios.get('api/city.json')
			.then(this.getCityInfoSucc)
		},
		getCityInfoSucc (res){
			res=res.data
			if(res.ret && res.data){
				const data = res.data
				this.hotCities=data.hotCities
				this.cities=data.cities
			}
		},
		handleletterChange (letter){
			this.letter=letter
		}

	},
	mounted (){
		this.getCityInfo ()
	}


}
</script>

<style>
</style>